<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table>
    <tr>
      <th>用户账号</th>
      <th>
        <input type="text" id="uname">
      </th>
    </tr>
    <tr>
      <th>用户密码</th>
      <th>
        <input type="text" id="upwd">
      </th>
    </tr>
  </table>
  <button onclick="login()">登录</button>
  <div id="d1"></div>
  <script>
    function login() {
      var $uname = uname.value;
      var $upwd = upwd.value;
      // 验证用户不能为空
      if (!$uname) {
        alert('用户账号不能为空');
        return;
      }
      if (!$upwd) {
        alert("用户密码不能为空");
        return;
      }
      // 1.创建异步对象
      var xhr = new XMLHttpRequest();
      // 4.打开监听，接收响应
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var r = xhr.responseText;
          if (r == 1) {
            d1.innerHTML = "登陆成功";
            location.href = "list.html";
          } else {
            d1.innerHTML = "用户名或者密码错误";
          }
        }
      }
      // 2.打开连接，创建请求
      xhr.open("get", "/pro/v1/login/" + $uname + "&" + $upwd, true);
      // 3.发送请求
      xhr.send();
    }
  </script>
</body>

</html>